<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-size: 50px;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;

            /*
                定位position:
                    - 定位是一种更加高级的布局手段
                    - 通过定位可以将元素摆放到页面的任意位置
                    - 使用position属性来设置定位
                        可选值：
                            static      默认值，元素是静止的，没有开启定位
                            relative    开启元素的相对定位
                            absolute    开启元素的绝对定位
                            fixed       开启元素的固定定位
                            sticky      开启元素的粘滞定位

                    - 相对定位特点：
                        1.开启相对定位的元素不设置偏移量则不会发生任何变化
                            - 偏移量（offset）：
                                top
                                    - 定位元素和定位位置上边的距离(定位位置指的是原始位置)
                                bottom
                                    - 定位元素和定位位置下边的距离
                                left
                                    - 定位元素和定位位置左边的距离
                                right
                                    - 定位元素和定位位置右边的距离

            */
            position: relative;
            right: auto;
            /*top: -200px;*/
            /*left: 200px;*/
        }
        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>